<template>
  <div class="task-item">
    <div class="icon-placeholder">
      <!-- Icon Placeholder -->
      <van-icon size="27" color="#609F7F" :name="task.icon" />
    </div>
    <span class="task-title">{{ task.title }}</span>
    <button class="task-button" :disabled="task.status === 'completed'" @click="handleClaim">
      <span v-if="task.status === 'todo'">+{{ task.reward }}租币</span>
      <span v-else>已领取</span>
    </button>
  </div>
</template>

<script setup lang="ts">
// 定义 Task 对象的类型
import type { Task } from '../data';

// 接收父组件传来的 props
const props = defineProps<{
  task: Task;
}>();

// 定义该组件可以发出的事件
const emit = defineEmits(['claim']);

// 点击按钮的处理函数
const handleClaim = () => {
  // 只有在 'todo' 状态下才发送事件
  if (props.task.status === 'todo') {
    emit('claim', props.task.id);
  }
};
</script>

<style scoped lang="scss">
// 定义颜色变量
$orange-color: #FF7F00;
$gray-color: #bdc3c7;

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0px 2 6px 0px rgba(44, 93, 88, 0.06);

  .icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    background-color: #E5F6EE;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
  }

  // 针对 "去分享" 任务的虚线边框图标

  .task-title {
    flex-grow: 1;
    color: #333;
    font-size: 16px;
  }

  .task-button {
    width: 89px;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;

    // "待完成" 状态的样式
    background-color: transparent;
    color: $orange-color;
    border: 1px solid $orange-color;

    // "已完成" 状态的样式
    &:disabled {
      color: #999;
      border-color: $gray-color;
      background-color: transparent;
      cursor: not-allowed;
    }
  }
}
</style>